<template>
	<view class="my-add-path">
		<view class="path-item">
			<view>收 件 人</view>
			<input type="text" placeholder="收件人姓名" v-model="pathObj.name"/>
		</view>
		<view class="path-item">
			<view>手 机 号</view>
			<input type="text" placeholder="11位手机号" v-model="pathObj.tel"/>
		</view>
		<view class="path-item">
			<view>所 在 地 址</view>
			<view @click="showPicker">{{pathObj.city}}</view>
			<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm">
			</mpvue-city-picker>
		</view>
		<view class="path-item">
			<view>详 细 地 址</view>
			<input type="text" placeholder="请输入详细地址" v-model="pathObj.details"/>
		</view>
		<view class="path-item">
			<view>设为默认地址</view>
			<radio-group name="isDefaultAddress" @change="radioChange">  
			        <label class="radio">  
			          <radio color="#ff3333" :checked="pathObj.isDefault" />  
			          <text>默认</text>  
			        </label>  
			      </radio-group>  
		</view>
	</view>
</template>

<script>
	import mpvueCityPicker from '../components/mpvue-citypicker/mpvueCityPicker.vue'
	import {mapActions} from 'vuex'
	export default{
		data(){
			return{
				pickerValueDefault:[0,0,1],
				pathObj:{
					name:"",
					tel:"",
					city:"请选择 >",
					details:"",
					isDefault: false
				},
				i:-1,
				//判断是否修改状态
				isStatus:false
			}
		},
		//任意点击一个地址去修改地址，获取该地址本身的值
		onLoad(e) {  
		    if (e.data) {  
		        uni.setNavigationBarTitle({
		        	title:"修改地址"
		        }) 
				let result = JSON.parse(e.data);  
				this.pathObj = result.item;
				this.i = result.index;
				this.isStatus = true;
		    }  
		},
		components:{
			mpvueCityPicker,
		},
		//页面生命周期
		onNavigationBarButtonTap() {  
		    if (this.isStatus) {  
		        // 修改地址页面  
		        this.updatePathFn({ 
		            index: this.i, 
		            item: this.pathObj,
		        }) 
		        uni.navigateBack({ 
		            delta: 1,
		        })
		    } else {  
		        // 新增地址页面  
		        this.createPathFn(this.pathObj);  
		        uni.navigateBack({ 
		            delta: 1
		        })
		    }  
		},
		methods: {
		  ...mapActions(["createPathFn","updatePathFn"]),
		  showPicker() {
		    this.$refs.mpvueCityPicker.show();
		  },
		  onConfirm(e) {
		    this.pathObj.city = e.label;
		  },
		  radioChange() {  
		    this.pathObj.isDefault = !this.pathObj.isDefault;  
		  }  
		  
		}
	}
</script>

<style scoped>
	.my-add-path{
		padding-left: 20rpx;
	}
	.path-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		width: 100%;
		border-bottom: 2rpx solid #cccccc;
	}
	.path-item input{
		flex: 1;
		text-align: left;
		padding-left: 10rpx;
	}
</style>